//1.导航数组
let arr = ['小说', '青春动漫', '经济管理', '历史文化', '人文社科', '育儿教育', '旅游美食', '中小学辅导', '外语考试', '文学艺术', '成功励志']
//2.书籍数组
let bookList = [
  {
    id: 1,
    name: '狼图腾(修订版)（一部描绘、研究蒙古草原狼的“旷世奇书”）',
    subPrice: 19.9,
    normalPrice: 39.9,
    imgSrc: './img/langtut.jpg'
  },
  {
    id: 2,
    name: '狼图腾(修订版)（一部描绘、研究蒙古草原狼的“旷世奇书”）',
    subPrice: 29.9,
    normalPrice: 49.9,
    imgSrc: './img/dashuju.jpg'
  },
  {
    id: 3,
    name: '狼图腾(修订版)（一部描绘、研究蒙古草原狼的“旷世奇书”）',
    subPrice: 39.9,
    normalPrice: 59.9,
    imgSrc: './img/mingchaonxs.jpg'
  },
  {
    id: 4,
    name: '狼图腾(修订版)（一部描绘、研究蒙古草原狼的“旷世奇书”）',
    subPrice: 49.9,
    normalPrice: 69.9,
    imgSrc: './img/musong.jpg'
  },
  {
    id: 5,
    name: '狼图腾(修订版)（一部描绘、研究蒙古草原狼的“旷世奇书”）',
    subPrice: 69.9,
    normalPrice: 199.9,
    imgSrc: './img/pinang.jpg.'
  }
]

//3.添加购物车的方法
function buy(id) {
  let cart = JSON.parse(window.sessionStorage.getItem('cart')) || []
  cart.push(bookList[id - 1])
  window.sessionStorage.setItem('cart', JSON.stringify(cart))
}

//4.拼接导航列表
function navigate() {
  let bookListGroup = $('.book-list-group')
  bookListGroup.empty()
  $(arr).each(function(index, item) {
    let bookListItem = `
          <div class="book-list-item">
            <a href="#" class="list-item-link">
              <span class="link-text">${item}</span>
              <span class="link-arrow">&gt;</span>
            </a>
          </div>`
    bookListGroup.append(bookListItem)
  })
}

//5.拼接图书列表
function book() {
  //图书列表
  let booksGroup = $('.books-group')
  booksGroup.empty()
  $(bookList).each(function(index, item) {
    let book = `
          <div class="book">
            <div class="book-wrap">
              <!-- 上面的图片 -->
              <a href="#" class="book-link">
                <img src="https://web17.oss-cn-hangzhou.aliyuncs.com/bg_pic.png" 
                alt="" imgsrc="${item.imgSrc}" class="lazy"/>
              </a>
              <!-- 中间的文字 -->
              <div class="book-name">${item.name}</div>
              <!-- 底部的价格购买按钮 -->
              <div class="operate">
                <div class="price">
                  <span class="sub-price">￥${item.subPrice}</span>
                  <span class="normal-price">￥${item.normalPrice}</span>
                </div>
                <div class="buy" >
                  <div>点击</div>
                  <div>购买</div>
                </div>
              </div>
            </div>
          </div>
          `
    booksGroup.append(book)
  })
}

//6.jq的工厂函数
$(function() {
  navigate()
  book()
  //首次加载时如果有符合window.scrollY + window.innerHeight > lazyArr[i].offsetTop + 200
  lazyLoad()
  //给window移除事件和对应的函数lazyLoad
  removeEvent(window, 'scroll', lazyLoad)
  //给window绑定事件scroll，执行lazyLoad函数
  addEvent(window, 'scroll', lazyLoad)
  //点击事件
  $('.buy').on('click', function() {
    $('.mask').css('display', 'block')
    $('.alert').css('display', 'flex')
    //声明定时任务
    let id = setTimeout(function() {
      $('.mask').css('display', 'none')
      $('.alert').css('display', 'none')
      clearTimeout(id)
    }, 3000)
  })
  //回到顶部
  $('#toTop').click(function() {
    //500毫秒完成回到顶部动画
    $('html,body').animate({ scrollTop: '0px' }, 500)
  })

})

